<template>
	<el-header style="padding: 0" class="mixin-header">
		<div class="logo-box">
			<img src="@/assets/logo.png" />
			<h2>Clean Admin</h2>
		</div>
		<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
			<el-menu-item v-for="(item, index) in menu" :key="index" :index="item.id" @click="onSelect">
				<el-icon>
					<component :is="item.icon" />
				</el-icon>
				<span>{{ item.label }}</span>
			</el-menu-item>
		</el-menu>
		<!-- tools -->
		<NavbarTool />
	</el-header>
</template>

<script setup lang="ts">
import { defineComponent, PropType } from 'vue';
import NavbarTool from '@/layouts/navbar/NavbarTool.vue';

defineComponent({ name: 'MixinLayoutNavbar' });
interface MenuItem {
	id: string;
	key: string;
	parentId: string;
	name: string;
	title: string;
	label: string;
	path: string;
	children?: MenuItem[];
	icon?: any;
}
const { menu } = defineProps({
	menu: {
		type: Array as PropType<MenuItem[]>,
		default: () => [],
	},
});
const emits = defineEmits(['menuCallback']);

const onSelect = (e: any) => {
	const { index } = e;
	emits('menuCallback', index);
};
</script>

<style scoped lang="scss">
.mixin-header {
	display: flex;
	align-items: center;
}

.logo-box {
	display: flex;
	align-items: center;
	height: 56px;
	box-sizing: border-box;
	padding: 0 16px;
	width: 280px;

	img {
		width: 40px;
		height: 40px;
		object-fit: contain;
		margin-right: 8px;
		border-radius: 50%;
	}

	h2 {
		display: inline-flex;
		margin-bottom: 0 !important;
		transition: all 0.3s linear;
	}
}

.el-header {
	background: var(--base-background-color);
	border-bottom: 1px solid var(--base-border-color);
	:deep(.el-menu) {
		--el-menu-bg-color: var(--base-aside-background-color);
		--el-menu-text-color: var(--base-text-color);
		border-bottom: none ;
	}
}
</style>
